<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="nav">
    <ul>
        <li>案例管理</li>
        <li>/</li>
        <li>添加案例</li>
    </ul>
</div>
<div>
    <form action="">
        <p>案例标题:<input name="caseTitle" id="caseTitle" type="text"></p>
        <p>案例描述: <textarea name="casetDesc" id="casetDesc" style="width: 700px;"></textarea></p>
        <p><input type="hidden" class="hiddenImg" name="caseImg" id="caseImg"></p>
        <p>案例图片:<input name="file" type="file">
            <input name="Token" type="hidden"
                   value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9">
            <input type="button" class="btn" onclick="upLoadPicture(0)" value="上传">
        </p>
        <div class="img-box"></div>
    </form>
    <form action="">
        <p>案例详情:<textarea name="caseDetails" id="caseDetails" style="width: 700px;"></textarea></p>
        <p><input type="hidden" class="hiddenImg" name="caseDetailsImg" id="caseDetailsImg"></p>
        <p>案例详情图片:<input name="file" type="file">
            <input name="Token" type="hidden"
                   value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9">
            <input type="button" class="btn" onclick="upLoadPicture(1)" value="上传">
        </p>
        <div class="img-box"></div>
        <p class="btn-box">
            <input type="button" value="提交" onclick="doIt()">
            <input type="reset" value="重置">
        </p>
    </form>
</div>
<script>
    tinymce.init({
        selector: 'textarea', //容器，可使用css选择器
        language: 'zh_CN', //调用放在langs文件夹内的语言包
        toolbar: true, //工具栏
        menubar: true, //菜单栏
        branding: false, //右下角技术支持
        inline: false, //开启内联模式
        elementpath: false,
        min_height: 400, //最小高度
        height: 800, //高度
        skin: 'oxide',
        toolbar_sticky: true,
        visualchars_default_state: true, //显示不可见字符
        image_caption: true,
        paste_data_images: true,
        relative_urls: false,
        // remove_script_host : false,
        removed_menuitems: 'newdocument', //清除“文件”菜单
        plugins: "lists,hr,advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount",   //依赖lists插件
        toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
        images_upload_url: 'a.php',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });
</script>
<script>
    function upLoadPicture(op) {
        var formData = new FormData($('form')[op]);
        var imgBoxs = $(".img-box");
        var hiddenImgs = $(".hiddenImg");
        $.ajax({
            url: 'http://up.tietuku.cn/',
            type: 'POST',
            success: function (data) {
                //window.location.reload();
                $(imgBoxs[op]).empty();
                $(imgBoxs[op]).append("<img src='" + data.linkurl + "' height='100'/>");
                $(hiddenImgs[op]).val(data.linkurl);
            },
            error: function (data) {
                console.log(data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    }
</script>
<script>
    function doIt() {
        var caseTitle = $("#caseTitle").val();
        var caseImg = $("#caseImg").val();
        var caseDetailsImg = $("#caseDetailsImg").val();
        var casetDesc = tinymce.editors[0].getContent();
        var caseDetails = tinymce.editors[1].getContent();
        $.post("/web/caseInfo", {
            op: "save",
            caseTitle: caseTitle,
            caseImg: caseImg,
            caseDetailsImg: caseDetailsImg,
            casetDesc: casetDesc,
            caseDetails: caseDetails
        }, function (data) {
            $("#content").load("caseInfo/caseInfo-list.html");
            alert("添加" + (data == '1' ? "成功" : "失败"));
        })
    }
</script>
</body>
</html>